<template>
  <div class="page-main">
    <home-nav :userData="userinfo"></home-nav>
    <div class="container">
      <div class="head-content">
        <span class="bold-font">合同附件表</span>
        <!-- <a-button class="hte-btn add-btn" type="primary">完成添加</a-button> -->
      </div>
      <div class="content">
        <div class="nav">
          <ul class="left">
            <li
              v-for="item of valueTypeList"
              :key="item.id"
              :class="['hoverShow', { active: valueType == item.id }]"
              @click="changeNavType(item.id)"
            >
              {{ item.name }}
            </li>
          </ul>
          <span v-if="valueType != 4"><a-icon type="sync" /></span>
        </div>
        <div class="table-box">
          <div class="btn-box">
            <template v-if="valueType != 4">
              <a-button class="hte-btn add-btn" type="primary">下载</a-button>
            </template>
            <template v-if="valueType == 4">
              <a-button class="hte-btn add-btn" type="primary">插入</a-button>
              <a-button class="hte-btn">上传</a-button>
              <a-button class="hte-btn">下载</a-button>
              <a-button class="hte-btn">刷新</a-button>
            </template>
          </div>
          <a-table
            class="hte-table-content"
            :columns="approvalColumns"
            :data-source="approvalData"
            :pagination="pagination"
            @change="pageChange"
            :loading="tabLoading"
            bordered
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            size="middle"
            rowKey="id"
          >
            <template slot="num" slot-scope="text, record, index">
              {{ (currPageIndex - 1) * currPageSize + parseInt(index) + 1 }}
            </template>
            <template slot="toAudit" slot-scope="text, record">
              <a-button type="primary" size="small" @click="doAudit(record)">{{
                valueType == 0 ? '审批' : '明细'
              }}</a-button>
            </template>
          </a-table>
        </div>
      </div>
    </div>    
  </div>
</template>
<script>
import '@/config/upload.install.js'
import { getAction } from '@/api/manage'

export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractFileList',
        badgecount: '',
      },
      valueTypeList: [
        { name: '主合同', id: 0 },
        { name: '补充协议1', id: 1 },
        { name: '补充协议2', id: 2 },
        { name: '补充协议X', id: 3 },
        { name: '管理员附件', id: 4 },
      ],
      valueType: 0, //数据类型：0-待审批，1-已处理，2-我发起的
      valueSearch: '',
      tabLoading: false,
      pagination: {
        total: 0,
        current: 1,
      },
      currPageIndex: 1,
      currPageSize: 10,
      url: {
        loadData: '/home/pendingApprovalList',
      },
      approvalColumns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          width: '7%',
          align: 'center',
          scopedSlots: { customRender: 'num' },
        },
        {
          title: '上传文件名称',
          dataIndex: 'projectName',
          width: '53%',
          align: 'center',
        },
        {
          title: '上传人',
          dataIndex: 'submitUserName',
          width: '20%',
          align: 'center',
        },
        {
          title: '上传时间',
          dataIndex: 'submitDate',
          width: '20%',
          align: 'center',
        },
      ],
      approvalData: [],
      selectedRowKeys: [],
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.tabLoading = true
      getAction(this.url.loadData, {
        status: this.valueType,
        keyWord: this.valueSearch,
        pageIndex: this.currPageIndex,
        pageSize: this.currPageSize,
      })
        .then((res) => {
          this.tabLoading = false
          if (res.code == 200) {
            this.approvalData = res.result.records
            this.pagination.total = res.result.total
          } else {
            this.$messageWorkReport.warning('加载数据异常：' + res.message)
          }
        })
        .catch((e) => {
          this.tabLoading = false
          this.$messageWorkReport.warning('加载数据失败:' + e.message)
        })
    },
    pageChange(page) {
      this.currPageIndex = page.current
      this.currPageSize = page.pageSize
      this.pagination.current = page.current
      this.loadData()
    },
    doSearch() {
      this.currPageIndex = 0
      this.loadData()
    },
    changeNavType(type) {
      this.valueType = type
      this.currPageIndex = 1
      this.pagination.current = 1
      this.loadData()
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .container {
    .content {
      background: #fff;
      border: solid 1px #e2e2e2;
    }
    .nav {
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 0 26px;
      .left {
        padding: 0;
        margin: 0;
        li {
          padding: 15px;
          font-size: 16px;
        }
      }
      > span {cursor: pointer;
        &:hover{color: @font-color-active;}
      }
    }
    .table-box {
      padding: 15px 26px;
      .btn-box {
        margin-bottom: 15px;
      }
    }
  }
}
</style>
